<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html >
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>电影之城</title>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700" rel="stylesheet" type="text/css" />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">

</style>
<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script language="javascript" src="js/jquery.js"></script>
<script language="javascript">
$(document).ready(function()
{
   var len=$("#flash_num>li").length;
   var index=1;
   var int;
   function showSys(num)  //图片切换函数
   {
    $("#flash_num>li").removeClass().addClass("click_out").eq(num).toggleClass("click_out").addClass("click_over");
    $("#flash_pic>div").fadeOut(0).eq(num).fadeIn(0);
   }
   function ziDong()  //自动切换
   {
    if(index==len)
    {
     index=0;
    }
    showSys(index);
    index=index+1;
   }
   int=setInterval(ziDong,2000);
   $("#flash_num>li").click(function() //点击切换
   {
    var index_num=$("#flash_num>li").index(this);
    showSys(index_num);
    index=index_num+1;  //改变全局变量的值，以便鼠标移开的时候能够衔接上
   });
   
    $("#flash_num>li").mouseover(function() //鼠标移上去时就切换
   {
    var index_num=$("#flash_num>li").index(this);
    showSys(index_num);
    index=index_num+1;  //改变全局变量的值，以便鼠标移开的时候能够衔接上
   });
   
   $("#movie-img2").mouseover(function()  //移动到上面时停止自动切换
       {
        clearInterval(int);
       });
   $("#movie-img2").mouseout(function()  //移开时继续自动切换
       {
        int=setInterval(ziDong,2000);
       });
	   
//鼠标移到图片和移出图片的特效
	 
	
//当鼠标移到列表时的特效
   $(".ol-li").hover(
		function(){
			$(this).css("background","#333");//鼠标移到某一列时，背景色发生变化
		},
		function(){
			$(this).css("background","#666");//鼠标移出某一列时，背景色还原
		}
    );
	
	 $(".olclass1 li a").hover(
		function(){
			$(this).css("background","#ccc");//鼠标移到某一列时，背景色发生变化
			$(this).css("color","red");
		},
		function(){
			$(this).css("background","#fff");//鼠标移出某一列时，背景色还原
			$(this).css("color","blue");
		}
      );
	  
	  $(".title-ul li").hover(
		function(){
			$(this).css("background","#999");//鼠标移到某一列时，背景色发生变化
			//$(this).css("color","");
		},
		function(){
			$(this).css("background","#690");//鼠标移出某一列时，背景色还原
			 
		}
      );
	  
	    
 
});
</script>

</head>
<body>
<div id="header-wrapper">
	<div id="header-title">
        <ul class="title-ul">
            <li><a href="#num1">首页</a></li>
            <li><a href="#num2">内地</a></li>
            <li><a href="#num3">港台</a></li>
            <li><a href="#num4">欧美</a></li>
            <li><a href="#num5">微电影</a></li>
            <li><a href="#">更多</a></li>
        </ul>
    </div>
    <div id="search-form">
    	<ul id="search-form-ul">
        	<li><input id="search-button" type="button" value="影视搜索" width="100px" /></li>
            <li><input type="text" name="search"  /></li>
            <li><font size="6" color="#FFFFFF">电影之城</font></li>
        </ul>
    </div>
</div>
 

<!--对各个类型做详细解说-->

<!--内容板块————第一板块-->
 
<!--尾部-->
<div id="final-mess">
    <center>
    <p>国际教育学院互联网11级1班：李超 姜广州</p>
    <p>国际教育学院互联网11级3班：梅贤兵 孙凯</p>
    </center>
</div>

</body>
</html>
